<template>
    <div>
            <!--新增-->
            <div v-if="oStatus==='add'">
                <el-form ref="form" :model="form"  label-width="110px">
                    <!--如果是在已有的部门上添加，显示被添加的部门名-->
                    <el-row v-if="oType==='1'">
                        <el-form-item label="上级部门名：" prop="name">
                            <el-input size="mini" :maxlength="60" v-model="form.name" readonly></el-input>
                        </el-form-item>
                    </el-row>
                    <!--输入要添加的部门名-->
                    <el-row>
                        <el-form-item label="部门名：" prop="addName">
                            <el-input size="mini" :maxlength="60" v-model="form.addName"></el-input>
                        </el-form-item>
                    </el-row>
                </el-form>
            </div>
            <!--编辑-->
            <div v-if="oStatus==='edit'">
                <el-form ref="form" :model="form" label-width="110px">
                    <el-form-item label="上级部门名：" prop="couponSelected">
                        <treeselect v-model="form.couponSelected" :multiple="false" :options="depData" class="vueTreeSelectMini" style="margin-top: 8px;"
                                    :normalizer="normalizer" placeholder="请选择"/>
                    </el-form-item>
                    <el-row>
                        <el-form-item label="部门名：" prop="name">
                            <el-input size="mini" :maxlength="60" v-model="form.name"></el-input>
                        </el-form-item>
                    </el-row>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer center">
                <el-button size="mini" @click="close">取 消</el-button>
                <el-button size="mini" type="primary" @click="addDepartment">确 定</el-button>
            </div>
    </div>
</template>

<script>
    import ajax from '@api/ajax'
    import {QUERY_DEP_INFO, DEPARTMENT_MAINTAIN} from '@api/url'
    import Treeselect from '@riophae/vue-treeselect'
    import '@riophae/vue-treeselect/dist/vue-treeselect.css'
    import '@asst/css/treeselectstyle.css'

    export default {
        components: {Treeselect},
        name: 'DepartmentForm',
        data () {
            return {
                departmentForm: false,
                form: {},
                oStatus: '',
                dialogVisible: false,
                depData: {},
                oType: ''
            }
        },
        methods: {
            normalizer (node) {
                return {
                    id: node.departId,
                    label: node.name,
                    children: node.children
                }
            },
            // 获取调用页面传入的数据
            showFormDialog (data, status, type) {
                this.oStatus = status
                this.oType = type
                this.form = Object.assign({}, data)
                // this.form = data
                this.departmentForm = true
                if (data.parentId !== '0') {
                    this.form.couponSelected = data.parentId
                }
            },
            // 将数据转换成tree
            translateDataToTree (data) {
                // 没有父节点的数据
                let parents = data.filter(value => value.parentId === 'undefined' || value.parentId === '0')
                // 有父节点的数据
                let children = data.filter(value => value.parentId !== 'undefined' && value.parentId !== '0')
                // 定义转换方法的具体实现
                let translator = (parents, children) => {
                    // 遍历父节点数据
                    parents.forEach((parent) => {
                            // 遍历子节点数据
                            children.forEach((current, index) => {
                                    // 此时找到父节点对应的一个子节点
                                    if (current.parentId === parent.departId) {
                                        // 对子节点数据进行深复制，这里只支持部分类型的数据深复制，对深复制不了解的童靴可以先去了解下深复制
                                        let temp = JSON.parse(JSON.stringify(children))
                                        // 让当前子节点从temp中移除，temp作为新的子节点数据，这里是为了让递归时，子节点的遍历次数更少，如果父子关系的层级越多，越有利
                                        temp.splice(index, 1)
                                        // 让当前子节点作为唯一的父节点，去递归查找其对应的子节点
                                        translator([current], temp)
                                        // 把找到子节点放入父节点的children属性中
                                        typeof parent.children !== 'undefined' ? parent.children.push(current) : parent.children = [current]
                                    }
                                }
                            )
                        }
                    )
                }
                // 调用转换方法
                translator(parents, children)
                // 返回最终的结果
                return parents
            },
            // 查询部门信息
            queryDepInfo () {
                ajax.post(QUERY_DEP_INFO).then(res => {
                    let tree = this.translateDataToTree(res.data || [])
                    this.depData = tree
                }).catch(err => {
                    console.error('查询发生错误！', err)
                }).finally(() => {
                })
            },
            // 新增或者编辑调用的方法
            addDepartment () {
                // 新增
                if (this.oStatus === 'add') {
                    let addConditions = {}
                    addConditions.name = this.form.addName
                    addConditions.optMode = 'A'
                    if (this.form.departId == null) {
                        addConditions.parentId = '0'
                    } else {
                        addConditions.parentId = this.form.departId
                    }
                    ajax.post(DEPARTMENT_MAINTAIN, addConditions).then(res => {
                        // this.close()
                        this.$emit('loadDepTree', false)
                    }).catch(err => {
                        console.error('查询发生错误！', err)
                    })
                }
                // 编辑
                if (this.oStatus === 'edit') {
                    let editConditions = {}
                    editConditions.parentId = this.form.couponSelected
                    editConditions.departId = this.form.departId
                    editConditions.name = this.form.name
                    editConditions.optMode = 'U'
                    ajax.post(DEPARTMENT_MAINTAIN, editConditions).then(res => {
                        this.close()
                        this.$emit('loadDepTree', true)
                    }).catch(err => {
                        console.error('查询发生错误！', err)
                    })
                }
            },
            // 关闭页面时form置空
            close () {
                // this.$refs.form.resetFields()
                this.departmentForm = false
                this.$emit('loadDepTree', false)
            }

        },
        mounted () {
            this.queryDepInfo()
        }
    }
</script>

<style scoped>
</style>
